<template>
  <div class="like-list">
    <van-nav-bar fixed border title="我的文章" left-text="返回" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-button icon="plus" size="small" color="#d75f95" class="xiewenzhang" @click="sharetext">写文章</van-button>
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading"
                      success-text="刷新成功"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="已加载完成">
        <article-item v-for="item in list"
                      :key="item.id"
                      :title="item"
                      :article="item"
                      :number="item.id"></article-item>
      </van-list>
    </van-pull-refresh>
    <div class="container" v-if="!listexist">
      <img src="@/assets/404.png" alt="Alternate Text" />
      <div class="shangfanganniu"><div>很抱歉你还未发布任何文章，点击下方按钮去发布吧</div></div>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/article-item'
import { list } from '@/static/article-list'

export default {
  name: 'MyText',
  components: {
    ArticleItem
  },
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      isLoading: false,
      // 列表数据
      result: [],
      // 控制下拉刷新数据
      freshnum: 0,
      listexist: false
    }
  },
  computed: {
    myname () {
      return this.$store.state.userInfo.name
    }
  },
  created () {
    this.refresh()
  },
  methods: {
    onRefresh () {
      this.refresh()
    },
    refresh () {
      var arr = []
      if (this.$store.state.user) {
        list.forEach(val => {
          arr.push(...val.result)
        })
      }
      setTimeout(() => {
        this.list = []
        this.list = arr.filter(val => {
          if (val.aut_name === this.myname) {
            val.photoid = val.textid.toString().slice(0, 1)
            return true
          }
        })
        this.list.push(...this.$store.state.newtext)
        this.loading = false
        this.isLoading = false
        this.finished = true
        this.listexist = this.list.length > 0
      }, 1000)
    },
    sharetext () {
      if (this.$store.state.user) {
        this.$router.push('/sharetext')
      } else {
        this.$toast.fail('您还未登录，请先登录')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .like-list {
    position: fixed;
    top: 100px;
    bottom: 100px;
    right: 0;
    left: 0;
    overflow-y: auto;
  }

  .container {
    text-align: center;
    padding-top: 200px;
    .shangfanganniu

  {
    div

  {
    font-size: 25px;
    margin-bottom: 20px
  }

  }

  img {
    width: 40%;
  }

  }

  .van-nav-bar {
    border-bottom: 1px solid #808080;
    box-shadow: 1px 1px 3px 3px #e3e3e3
  }
  .van-pull-refresh{
    height:1500px;
  }
  .xiewenzhang {
    border-radius: 15px;
    .van-icon{
               color:#fff;
             }
  }
</style>
